<template>
  <BasicTable
    :query-api="station.queryAll"
    :create-api="station.create"
    :update-api="station.update"
    :delete-api="station.delete"
    :initial-params="initialParams"
    :query-fields="queryFields"
    :table-fields="tableFields"
    :form-fields="formFields"
    :form-rules="formRules"
  >
  </BasicTable>
  <el-drawer v-model="drawerVisible" title="关联机房">
    <el-checkbox-group v-model="selected" v-loading="loading" class="block">
      <el-checkbox
        v-for="item in data"
        :key="item.id"
        class="block"
        :label="item.id"
        size="large"
        >{{ item.name }}</el-checkbox
      >
    </el-checkbox-group>
    <template #footer>
      <el-button :loading="loading" type="primary" @click="handleConfirmBind"
        >确定</el-button
      >
      <el-button @click="handleCancelBind">取消</el-button>
    </template>
  </el-drawer>
</template>
<script setup lang="tsx">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { roomFile } from "../../api/room";
import { station } from "../../api/station.js";
import BasicTable from "../../components/BasicTable.jsx";
import parseTime from "../../utils/parseTime";

const initialParams = {
  limit: 999,
};

const formRules = {
  name: [{ required: true, message: "请输入车站名称" }],
  type: [{ required: true, message: "请输入类型" }],
  status: [{ required: true, message: "请选择状态" }],
};

const queryFields = [
  {
    prop: "id",
    title: "编号",
  },
  {
    prop: "name",
    title: "车站名称",
  },
  {
    prop: "type",
    title: "类型",
  },
  {
    prop: "status",
    title: "状态",
    slot: (row) => (
      <el-select
        class="w-full"
        v-model={row.value["status"]}
        placeholder="状态"
        clearable
      >
        {Object.entries(statusType).map(([value, label]) => (
          <el-option key={value} label={label} value={value}></el-option>
        ))}
      </el-select>
    ),
  },
];

const tableFields = [
  {
    prop: "id",
    title: "编号",
  },
  {
    prop: "name",
    title: "车站名称",
  },
  {
    prop: "type",
    title: "类型",
  },
  {
    prop: "mid",
    title: "机房档案id",
  },
  {
    prop: "status",
    title: "状态",
    formatter: (prop: string) => {
      return statusType[prop];
    },
  },
  {
    prop: "createTime",
    title: "创建时间",
    formatter: (row: string) => {
      return parseTime(row);
    },
  },
  {
    prop: "updateTime",
    title: "修改时间",
    formatter: (row: string) => {
      return parseTime(row);
    },
  },
  {
    title: "操作",
    action: true,
    slot: (row) => (
      <el-button link type="success" onClick={() => handleAssign(row)}>
        关联机房
      </el-button>
    ),
  },
];

const formFields = [
  {
    prop: "name",
    title: "车站名称",
  },
  {
    prop: "type",
    title: "类型",
  },
  {
    prop: "status",
    title: "状态",
    slot: (form: any) => (
      <el-select class="w-full" v-model={form.value.status}>
        {Object.keys(statusType).map((key) => (
          <el-option label={statusType[key]} value={Number(key)} />
        ))}
      </el-select>
    ),
  },
];

const statusType = {
  1: "使用中",
  2: "未使用",
  3: "维修中",
};

const drawerVisible = ref(false);

const loading = ref(false);
const data = ref([]);
const selected = ref([]);
let curId: number;

async function handleAssign(row) {
  curId = row.id;
  drawerVisible.value = true;
  loading.value = true;
  try {
    let res = await roomFile.queryAll({ limit: 999999 });
    data.value = res.data.list;
    res = await roomFile.queryById(row.id);
    selected.value = res.data.map((item) => item.id);
  } finally {
    loading.value = false;
  }
}

async function handleConfirmBind() {
  loading.value = true;
  try {
    await roomFile.batchBind({
      ids: selected.value,
      rid: curId,
    });
    ElMessage({ type: "success", message: "关联成功" });
    drawerVisible.value = false;
  } finally {
    loading.value = false;
  }
}

function handleCancelBind() {
  drawerVisible.value = false;
}
</script>
